<template>

    <el-main>
      <el-row>
            <el-table
                :data="resultlist"
                border
                id= "table-data"
                style="width: 200%">
                <el-table-column prop = "studentname" label="姓名" width="80">
                </el-table-column>
                <el-table-column prop = "homeworkinfo" label="说明" width="180">
                </el-table-column>
                <el-table-column prop = "homeworkname" label="作业名" width="180">
                </el-table-column>
                <el-table-column  label="状态"  width="180">
                  <template slot-scope="scope">
              <p  v-if="resultlist[scope.$index].status==1">已提交</p>
              <p v-if="resultlist[scope.$index].status==0">未提交</p>
            </template>
                </el-table-column>
                <el-table-column prop = "score" label="分数" width="80">
                </el-table-column>
            </el-table>
             <el-button type="primary" plain @click="exportTable()">导出成绩报表</el-button>
      </el-row>
    </el-main>
</template>

<script>
import fileSaver from 'file-saver'
import xlsx from 'xlsx'
  export default {
      name:"reportForm",
    data() {
      return {
        resultlist: []
      }
    },
    created () {
        this.getTeacherinfo()
      },
    methods: {
         getTeacherinfo() {
          this.$axios.get( "/getAllResult").then(resp =>{
            console.log(resp.data);
            this.resultlist = resp.data
          })
        },
        exportTable(){
          let box = xlsx.utils.table_to_book(document.querySelector('#table-data'))
          let out = xlsx.write(box, {
                  bookType: 'xlsx',
                  bookSST: true,
                  type: 'array'
                })
          try {
            fileSaver.saveAs(
              new Blob([out], {
                type: 'application/octet-stream'
              }),
              '学生成绩报表.xlsx'
            )
          } catch (e) {
            // 错误处理方式
            }
          return out
        }

    }
  }
</script>
<style scoped>
</style>
